<template>
  <a-modal :title="`接口测试`" :width="1100" :confirm-loading="confirmLoading1" :footer="null" @ok="handleOk()">
    <a-layout>
      <a-layout-content>
        <div id="table">
          <h3>接口名称:{{ ports1.portsName }}</h3>
          <div class="top_div">
            <p>
              <span readonly>RuquestURL</span><span>{{ ports1.portsPath }}</span>
            </p>
            <p>
              <span readonly>请求方式</span><span>{{ RequestMethod }}</span>
            </p>
          </div>
          <h3>输入参数</h3>
          <a-table :data-source="paramList1" size="middle" bordered :pagination="false">
            <a-table-column key="paramsName" data-index="paramsName">
              <template #title><span>参数名</span></template>
            </a-table-column>
            <a-table-column key="paramsName"
              >{{ paramsPath1 }}
              <template #title><span>参数位置</span></template>
            </a-table-column>
            <a-table-column key="paramsName"
              >{{ paramsType1 }}
              <template #title><span>数据类型</span></template>
            </a-table-column>
            <a-table-column key="paramsName"
              >{{ paramsIsNull2 }}
              <template #title><span>是否必填</span></template>
            </a-table-column>
            <a-table-column key="paramsName" title="测试值" :width="150">
              <div class="editable-cell">
                <a-input v-model:value="messageValue" style="margin: -5px 0" />
              </div>
            </a-table-column>
          </a-table> </div
        ><br />
        <a-button type="primary" @click="allIssue">测试</a-button>
        <!-- <a-button :disabled="activeClass" :class="{ activeClass: !activeClass, issue: true }" @click="allIssue()">测试</a-button> -->
      </a-layout-content>
      <a-layout-sider>
        <p style="position: relative; right: 40px">返回结果(JSON)</p>
        <div id="sider"> </div>
      </a-layout-sider>
    </a-layout>
  </a-modal>
</template>
<script setup lang="ts">
  import { selectDir } from '@/api/test/interFace';
  import { defineEmits, Ref } from 'vue';
  import { message } from 'ant-design-vue';
  import { portsList, paramsList } from '../type/index';
  // const activeClass = ref<boolean>(true);
  const emit = defineEmits(['changeShow1']);
  const confirmLoading1 = ref<boolean>(false);
  const handleOk = () => {
    emit('changeShow1', 'false1');
    confirmLoading1.value = false;
    // editableData.value = false;
  };

  // 接收父组件数据
  const props = defineProps({
    postIdName: {
      type: Number,
    },
  });
  // 打开弹窗，数据变化，请求接口
  let messageValue = ref('');
  let id = ref(0);
  watch(
    () => props.postIdName,
    nval => {
      if (nval) {
        id.value = nval;
      }
      let data = {
        portsId: id.value,
      };
      selectDir(data).then(res => {
        ports1.value = res.data.ports;
        // console.log(res, '0000000name');
        paramList1.value = res.data.paramList;
      });
    },
  );

  //头部基本信息表格
  let RequestMethod = ref();
  let ports1 = ref<portsList>({
    portsId: 0,
    portsName: '',
    dirId: 0,
    portsSource: '',
    portsMsg: '',
    portsProtocol: 0, //接口协议(1:http;2:https)
    portsIp: '',
    portsPath: '',
    portsRequestMethod: 0, //1:Get;2:Post
    portsOutTime: 0,
    portsStatus: 0, //接口状态(1:未发布;2:已发布;3:已停用)
    modifyTime: '',
    addTime: '',
  });
  //方式转换
  if (ports1.value.portsRequestMethod == 1) {
    RequestMethod.value = 'GET';
  } else {
    RequestMethod.value = 'POST';
  }

  //中间表格请求参数部分
  let paramsPath1 = ref();
  let paramsType1 = ref();
  let paramsIsNull2 = ref();
  const paramList1: Ref<paramsList[]> = ref([]);
  // 位置转化
  if (paramList1.value.paramsPath == 1) {
    paramsPath1.value = 'query';
  } else {
    paramsPath1.value = 'path';
  }
  //类型转换
  if (paramList1.value.paramsType == 1) {
    paramsType1.value = 'String';
  } else if (paramList1.value.paramsType == 2) {
    paramsType1.value = 'Int';
  } else {
    paramsType1.value = 'Float';
  }
  //是否必填转换
  if (paramList1.value.paramsIsNull == 1) {
    paramsIsNull2.value = '否';
  } else {
    paramsIsNull2.value = '是';
  }

  // const blurValue = () => {
  //   if (messageValue.value != '') {
  //     activeClass.value = false;
  //   } else {
  //     activeClass.value = true;
  //   }
  // };
  const allIssue = () => {
    if (messageValue.value == '') {
      alert('请输入测试值！');
    } else {
      message.success('测试成功！');
    }
  };
</script>
<style lang="less" scoped>
  th.column-money,
  td.column-money {
    text-align: right !important;
  }

  .ant-layout {
    width: 100%;
    height: 600px;
    background-color: white;

    .ant-table-wrapper {
      margin: 30px;
    }

    h3 {
      margin-bottom: -30px;
      margin-left: 30px;
      font-weight: bolder;
    }

    #table {
      width: 650px;

      .top_div {
        margin: 40px 0 0 30px;
        width: 91%;
        height: 100px;

        p {
          display: flex;
          height: 40px;
          flex-direction: row;
          // align-items: center;
          span {
            border: 1px solid rgb(179, 179, 179);
            text-align: center;
            line-height: 40px;
          }

          span:nth-child(1) {
            flex: 1;
            border-right: none;
          }

          span:nth-child(2) {
            flex: 3;
          }
        }

        p:nth-child(2) {
          position: relative;
          bottom: 15px;
        }
      }
    }

    .activeClass {
      color: aliceblue;
      background-color: #3195d8 !important;
    }
  }

  .ant-layout-sider {
    background-color: white;

    #sider {
      margin-left: -200px;
      // border: 1px solid #000;
      width: 400px;
      height: 550px;
      background-color: #000;
    }
  }

  .ant-btn {
    border-radius: 5px;
  }
</style>
